<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员主页</title>
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/axios.js"></script>
    <script src="../static/element-ui/index.js"></script>
    <link rel="stylesheet" href="../static/element-ui/index.css">
</head>
<style>
    html, body {
        height: 100%;
        margin: 0;
    }

    .el-header {
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    #houtai {
        height: 100%;
    }

    .el-aside {
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .el-menu-vertical-demo.el-menu {
        width: 198px;
        border-right: none;
    }

    .houtai_title {
        font-size: 20px;
    }

    .top_div, .mid_div, .bottom_div {
        width: 100%;
        position: relative;
    }

    .top_div {
        height: 10%;
        text-align: center;
        font-size: 24px;
        font-style: italic;
        font-weight: bold;
        border-bottom: 1px dashed;
    }

    .mid_div {
        height: 80%;
        border-bottom: 1px solid;
    }

    .mid_div > div {
        height: 100%;
        position: absolute;
    }

    .bottom_div {
        height: 10%;
    }
    .button1{
        position: absolute;
        top:10px;
    }
    .box2 {
        border-left: 1px dashed;
        border-right: 1px dashed;
        white-space: pre-wrap; /* 允许空格 */
    }

</style>
<!------------------------------style="width:200px;height:100%"--->
<body>
<div id="houtai">
    <el-drawer
            title="审核界面"
            :visible.sync="drawer"
            direction="ltr"
            size="100%"
            :before-close="handleClose">
        <!-- 标题 -->
        <div class="top_div" v-text="article.title"></div>
        <!--主体-->
        <div class="mid_div">
            <div class="box1" style="width: 20%">
                <div style="width: 100%;height: 60px;position: relative">
                    <el-avatar :size="50" :src="article.writer.img" style="position: absolute;left:25px;top:5px"></el-avatar>
                </div>
                <div style="width: auto;height: 40px;position: absolute;left: 85px;top: 20px;font-style: italic"
                v-text="article.writer.nickname"></div>
                <div style="position: absolute;top: 80px;width: 80%;text-align: center;font-size: 22px;font-style: italic;font-weight: bold">摘要</div>
                <div style="position: absolute;top:140px;width: 80%;left:10%;height: auto;white-space: pre-wrap;border-bottom: 1px solid" v-html="article.zhaiyao"></div>
                <div style="position: absolute;width: 80%;left:10%;height: auto;bottom: 10px;">
                    <el-tag type="success" v-for="tag in article.tags" v-text="tags[tag]"></el-tag>

                </div>
            </div>
            <div class="box2" style="width: 70%;right: 10%" v-html="article.content"></div>
        </div>
        <!--审核 -->
        <div class="bottom_div">
             <el-button class="button1" style="right: 100px" type="danger" round @click="shenHe(-1)">不合格</el-button>
             <el-button class="button1" style="right: 10px" type="success" round @click="shenHe(1)">合格</el-button>
        </div>
    </el-drawer>
    <el-container style="height: 100%; width: 100%">
        <!------------------->
        <el-aside style="width: 16%; background-color: rgb(84,92,100)">
            <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">文章审核</span>
                </el-menu-item>
                <el-menu-item index="2" @click="to_map">
                    <i class="el-icon-document"></i>
                    <span slot="title">用户分布</span>
                </el-menu-item>
                <el-menu-item index="3" @click="exit_">
                    <i class="el-icon-back"></i>
                    <span slot="title">退出</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <!------------------->
        <el-container height=100%>
            <el-header>
                <span class="houtai_title">博客后台管理平台</span>
            </el-header>
            <el-main style="width: 100%">
                <template style="width: 100%">
                    <el-table
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column prop="aid" label="文章编号" width="auto" align="center"></el-table-column>
                        <el-table-column prop="createTime" label="日期" width="auto" align="center"></el-table-column>
                        <el-table-column prop="user" label="作者" width="auto" align="center"></el-table-column>
                        <el-table-column prop="title" label="标题" width="auto" align="center"></el-table-column>
                        <el-table-column
                                align="center"
                                label="审核"
                                width="auto">
                            <template slot-scope="scope">
                                <el-button @click="openArt(scope.row.aid)" type="text" size="medium">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :prev-click="last"
                            :next-click="next"
                            :page-size="5"
                            @current-change="change"
                            :total="end">
                    </el-pagination>
                </template>
            </el-main>
        </el-container>
    </el-container>
</div>

<script src="../static/js/admin.js"></script>

</body>
</html>
